import React, { MouseEventHandler } from 'react';
import styles from './index.module.scss';
import { CategoryType } from '../Navigation';

export interface MenuProps {
    categorys?: CategoryType[];
    onSelect?: (index: number) => void;
}

const Menu: React.FC<MenuProps> = ({categorys, onSelect}) => {
  return (
    <div className={styles.container}>
      <h2 className={styles.title}>所有分类</h2>
      <ul className={styles.list}>
        {categorys?.map((item, index) => {
            return (
                <li key={item.id} onClick={() => onSelect!(index)}>{item.name}</li>
            )
        })}
      </ul>
    </div>
  );
};

export default Menu;